import React, { Component } from 'react';
import './index.css'

class PlaguePrevent extends Component {
  constructor(props) {
    super(props)
    this.state = {
      name: '',
      sex: 1,
      city: '北京',
      langeProgram: [
        { id: 1, name: 'Es6+', checked: false },
        { id: 2, name: 'TypeScript', checked: false },
        { id: 3, name: 'ES5', checked: false },
        { id: 4, name: 'Python', checked: false },
        { id: 5, name: 'GO', checked: false },
        { id: 6, name: 'Rush', checked: false },
        { id: 7, name: '其他', checked: false },
      ],
      cssProgram: [
        { id: 1, name: 'Less', checked: false },
        { id: 2, name: 'Sacc', checked: false },
        { id: 3, name: 'Sass', checked: false },
        { id: 4, name: 'CSS Modules', checked: false },
        { id: 5, name: 'PostCss', checked: false },
        { id: 6, name: 'styled-components', checked: false },
        { id: 7, name: 'Vanilla Css', checked: false },
        { id: 8, name: 'Windi CSS', checked: false },
        { id: 9, name: '其他', checked: false },
      ],
      frameProgram: [
        { id: 1, name: 'React', checked: false },
        { id: 2, name: 'Vue', checked: false },
        { id: 3, name: 'Taro', checked: false },
        { id: 4, name: 'Electron', checked: false },
        { id: 5, name: 'PWA', checked: false },
        { id: 6, name: 'uni-app', checked: false },
        { id: 7, name: 'Preact', checked: false },
        { id: 8, name: 'Svelte', checked: false },
        { id: 9, name: '其他', checked: false },
      ],
      developProgram: [
        { id: 1, name: 'VScode', checked: false },
        { id: 2, name: 'webStorm', checked: false },
        { id: 3, name: 'CodeSandbox', checked: false },
        { id: 4, name: 'Eslint', checked: false },
        { id: 5, name: 'Prettier', checked: false },
        { id: 6, name: '其他', checked: false },
      ],
      remark: ''
    }
    this.cityList = [
      { id: 1, name: '北京' },
      { id: 2, name: '上海' },
      { id: 3, name: '天津' },
      { id: 4, name: '深圳' },
      { id: 5, name: '合肥' },
      { id: 6, name: '成都' },
      { id: 7, name: '昆明' },
      { id: 8, name: '杭州' },
      { id: 9, name: '西安' },
    ]
  }
  changeName = (e) => {
    let name = e.target.value;
    this.setState({
      name: name
    })
  }
  handelSex = (e) => {
    let sex = e.target.value;
    this.setState({
      sex: parseInt(sex)
    })
  }
  changeCity = (e) => {
    let city = e.target.value
    this.setState({
      city: city
    })
  }
  changeLange = (key) => {
    var lange = this.state.langeProgram;
    lange[key].checked = !lange[key].checked;
    this.setState({
      langeProgram: lange
    })
  }
  changeCss = (key) => {
    var cssProgram = this.state.cssProgram;
    cssProgram[key].checked = !cssProgram[key].checked;
    this.setState({
      cssProgram: cssProgram
    })
  }
  changeFrame = (key) => {
    var frameProgram = this.state.frameProgram;
    frameProgram[key].checked = !frameProgram[key].checked;
    this.setState({
      frameProgram: frameProgram
    })
  }
  changeDevelop = (key) => {
    var developProgram = this.state.developProgram;
    developProgram[key].checked = !developProgram[key].checked;
    this.setState({
      developProgram: developProgram
    })
  }
  changeRemark = (e) => {
    let remark = e.target.value;
    this.setState({
      remark: remark
    })
  }
  submitMsg = (e) => {
    e.preventDefault();
    console.log('e', this.state)
    let { name, sex, city, langeProgram, cssProgram, frameProgram, developProgram, remark } = this.state;
    let lange = (langeProgram.filter(res=> res.checked)).map(item=>item.id);
    let css = cssProgram.filter(res=> res.checked).map(item=>item.id);
    let frame = frameProgram.filter(res=> res.checked).map(item=>item.id);
    let develop = developProgram.filter(res=> res.checked).map(item=>item.id);
    let param = {
      name,
      sex,
      city,
      lange,
      css,
      frame,
      develop,
      remark
    };
    console.log('param', param)
  }
  render() {
    return (
      // input text checkbox radio  select  textarea
      <div className='outside'>
        <div>
          <div className='name'>
            <h2>web前端开发主流技术调查问卷</h2>
            <p>您好!为了了解WEB前端开发主流技术所占比重的变化，我们特开展本次问卷调查，
              希望能得到您的真实想法与宝贵意见。本问卷实行匿名制以及保密制，所有数据只
              用于统计分析，请您放心填写。谢谢您的帮助!</p>
          </div>
          <div className='conter'>
            <form onSubmit={this.submitMsg.bind()}>
              <div>
                <p><span className='red'>*</span>1.您的姓名</p>
                <input className='inputWid' type='text' value={this.state.name} onChange={this.changeName.bind()} maxLength={8} placeholder='请输入姓名' />
              </div>
              <div>
                <p><span className='red'>*</span>2.您的性别</p>
                <div className='inputWid radio-sex'>
                  <span className='rightSex'>
                    <input type="radio" id='sex1' value="1" checked={this.state.sex === 1} onChange={this.handelSex} />
                    <label htmlFor="sex1"></label>
                    <span>男</span>
                  </span>
                  <input type="radio" id='sex2' value="2" checked={this.state.sex === 2} onChange={this.handelSex} />
                  <label htmlFor="sex2"></label>
                  <span>女</span>
                </div>
              </div>
              <div>
                <p><span className='red'>*</span>3.您的所在的大城市</p>
                <div className='inputWid selectstyle'>
                  <select value={this.state.city} onChange={this.changeCity}>
                    {
                      this.cityList.map((value, key) => {
                        return <option key={key}>{value.name}</option>
                      })
                    }
                  </select>
                </div>
              </div>
              <div>
                <p><span className='red'>*</span>4.你常用的编程语言是什么?</p>
                <div className='inputWid checkstyle'>
                  {
                    this.state.langeProgram.map((value, key) => {
                      return (
                        <p key={key}>
                          <input type="checkbox" checked={value.checked} onChange={this.changeLange.bind(this, key)} />{value.name}
                        </p>
                      )
                    })
                  }
                </div>
              </div>
              <div>
                <p><span className='red'>*</span>5.你常用的CSS技术是哪些?</p>
                <div className='inputWid checkstyle'>
                  {
                    this.state.cssProgram.map((value, key) => {
                      return (
                        <p key={key}>
                          <input type="checkbox" checked={value.checked} onChange={this.changeCss.bind(this, key)} />{value.name}
                        </p>
                      )
                    })
                  }
                </div>
              </div>
              <div>
                <p><span className='red'>*</span>6.你常用的前端框架是哪些?</p>
                <div className='inputWid checkstyle'>
                  {
                    this.state.frameProgram.map((value, key) => {
                      return (
                        <p key={key}>
                          <input type="checkbox" checked={value.checked} onChange={this.changeFrame.bind(this, key)} />{value.name}
                        </p>
                      )
                    })
                  }
                </div>
              </div>
              <div>
                <p><span className='red'>*</span>7.你常用的开发工具?</p>
                <div className='inputWid checkstyle'>
                  {
                    this.state.developProgram.map((value, key) => {
                      return (
                        <p key={key}>
                          <input type="checkbox" checked={value.checked} onChange={this.changeDevelop.bind(this, key)} />{value.name}
                        </p>
                      )
                    })
                  }
                </div>
              </div>
              <div>
                <p><span className='red'>*</span>8.您的对前端技术了解（自由发挥）</p>
                <div className='inputWid'>
                  <textarea vlaue={this.state.remark} onChange={this.changeRemark} placeholder='请输入你对前端技术的了解' />
                </div>
              </div>
              <input type='submit' value="提交" />
            </form>
          </div>
        </div>
      </div>
    )
  }
}
export default PlaguePrevent